<template>
	<view class="page">
		<view class="header flex">
			<view class="header-num">{{limitNum||0}}</view>
			<view class="header-text">剩余额度</view>
		</view>
		<view class="recharge-input flex">
			<view class="recharge-input-name">转赠ID：</view>
			<input class="recharge-input-input" type="number" placeholder="请填写转赠ID" v-model="member_id" />
		</view>
		<view class="recharge-cont">
			<view class="recharge-cont-title flex">优惠券分类</view>
			<view class="pay-list">
				<view class="pay-list-item flex" @tap="togglePay(num.id,nIndex)" v-for="(num,nIndex) in payList" :key="nIndex">
					<view class="pay-list-item-pay flex">
						<image class="pay-list-item-pay-icon" src="/static/images/jewel/coupon_redpack.png"></image>
						<view class="pay-list-item-pay-text">¥{{num.amount}}</view>
					</view>
					<image class="pay-list-item-pay-arrow" :src="acountId == num.id ? '/static/icons/pay-select-act.png' : '/static/icons/pay-select.png'"></image>
				</view>
			</view>
		</view>
		<view class="recharge-btn" :class="{gay:!acountId||limitNum == 0||!member_id}" @tap="rechargeBtn">确定</view>
		
		<paymentPassword :show="showPayFlag" digits="6" @confirm="confirm" @cancel="showPay"></paymentPassword>
		
		<view class="g-frame-mask" v-if="showPop||showPayFlag" @tap="togglePop()"></view>
		<view class="g-frame"  v-if="showPop">
			<view class="m-frame-header">
			    <view class="u-frame-title">确认转赠</view>
			    <image class="u-frame-close" src="../../../static/icons/ydt/close.png" mode="widthFix" @tap="togglePop()"></image>
			</view>
			<view class="u-frame-cont">
				<view><text class="text">转赠ID：</text><text>{{member_id}}</text></view>
				<view><text class="text">转赠面值：</text><text>{{moneyAcount}}</text></view>
			</view>
			<view class="m-frame-footer">
			    <view class="u-reset" @tap="togglePop()">取消</view>
			    <view class="u-confirm" @tap="showPay">确定</view>
			</view>
			
		</view>
		
	</view>
</template>
<script>
	import jewel from '@/common/common_zb.js';
	import md5 from '@/common/md5.js';
	export default {
		data() {
			return {
				acountId:'',
				payList: [],
				data:{},
				member_id:'',
				loadData:{},
				showPop:false,
				showPayFlag:false,
				limitNum:0,
				moneyAcount:0
			};
		},
        methods: {
			togglePop(type){
				this.showPop = !this.showPop 
			},
			showPay(){
				this.showPayFlag = !this.showPayFlag
				this.showPop = false
			},
			getPayList(){
				let that = this
				uni.showLoading({
					title:'加载中'
				})
				jewel.get('Maker/moneyList',{type:that.loadData.type},true,function(res){
					uni.hideLoading()
					that.payList = res.data.data
				})
			},
			togglePay(id,index){
				this.acountId = id
				this.moneyAcount = this.payList[index].amount
			},
			rechargeBtn(){
				let time = 1500
				if(this.limitNum <= 0){
					jewel.showToast('暂无额度可转赠',time)
				}else if(!this.acountId){
					jewel.showToast('请选择转赠面值',time)
				}else if(!this.member_id){
					jewel.showToast('请填写转赠ID',time)
				}else if(Number(this.acountId) > Number(this.limitNum)){
					jewel.showToast('额度不够',time)
				}else{
					this.togglePop()
				}
			},
			confirm(e){
				let that = this
				let data = {
					type:that.loadData.type,
					to_uid:that.member_id,
					coupon_id:that.acountId,
					paypwd:md5(e)
				}
				
				uni.showLoading({title:'转赠中'})
				jewel.post('Maker/giveByMoney',data,true,function(res){
					uni.hideLoading()
					jewel.showToast(res.data.msg,1500)
					if(res.data.code == 0){
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/jewel/agent_jewel/maker_coupon_record?pageType=give'
							})
							that.showPay()
						},1500)
					}
				})
			},
			getlimitData(){
				let that = this
				jewel.get('Maker/income_count',{},true,function(res){
					that.limitNum = that.loadData.type== '17'?res.data.data.company_recharge:res.data.data.myself_recharge
				});
			}
        },
		onShow(){
			this.getlimitData()
		},
        onLoad(loadData) {
			this.loadData = loadData
			this.getPayList()
        }
	}
</script>
<style lang="scss">
	.flex{
		display: flex;
	}
	
	.page{
		background-color: #f4f4f4;
		.header{
			background-image: url(@/static/images/jewel/m_coupon_give_bg.png);
			background-size: cover;
			background-repeat: no-repeat;
			text-align: center;
			color: #FFFFFF;
			height: 200rpx;
			flex-direction: column;
			justify-content: center;
			&-text{
				font-size: 30rpx;
			}
			&-num{
				font-size: 86rpx;
			}
		}
		.recharge-input{
			background-color: #FFFFFF;
			height: 120rpx;
			align-items: center;
			margin-top: 15rpx;
			&-name{
				font-size: 32rpx;
				padding-left: 36rpx;
			}
			&-input{
				font-size: 28rpx;
				flex: 1;
			}
		}
		.recharge-cont{
			padding: 0 25rpx;
			&-title{
				font-size: 32rpx;
				line-height: 86rpx;
				position: relative;
				align-items: center;
			}
			.pay-list{
				&-item{
					align-items: center;
					justify-content: space-between;
					background-color: #FFFFFF;
					height: 135rpx;
					border-radius: 5px;
					margin-bottom: 14rpx;
					box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
					&-pay{
						align-items: center;
						font-size: 32rpx;
						line-height: 108rpx;
						&-icon{
							width: 62rpx;
							height: 72rpx;
							display: block;
							margin-left: 40rpx;
							margin-right: 20rpx;
						}
						&-arrow{
							width: 42rpx;
							height: 42rpx;
							margin-right: 30rpx;
						}
					}
				}
				
			}
		}
		.recharge-btn{
			width: 716rpx;
			line-height: 108rpx;
			background-color: #d71511;
			color: #FFFFFF;
			text-align: center;
			font-size: 36rpx;
			border-radius: 50px;
			position: fixed;
			bottom: 20rpx;
			left: 50%;
			margin-left: -358rpx;
			&.gay{
				background-color: #CCCCCC;
			}
		}
	}
	.g-frame {
	    width: 581rpx;
	    background: #fff;
	    border-radius: 20rpx;
	    position: fixed;
	    top: 50%;
	    overflow: hidden;
	    left: 50%;
		/* margin-top: -215rpx; */
		/* margin-left: -290rpx; */
		z-index: 12;
		transform: translate(-50%,-50%);
	}
	
	.g-frame-mask {
	    background: #000;
	    opacity: .5;
	    height: 100vh;
	    width: 100%;
	    position: fixed;
	    top: 0rpx;
		z-index: 11;
	}
	
	.m-frame-header {
	    height: 110rpx;
	    width: 100%;
	    background: #d71311;
	    border-top-right-radius: 20rpx;
	    border-top-left-radius: 20rpx;
		position: relative;
		margin-bottom: 35rpx;
	}
	.u-frame-title {
	    width: 100%;
	    text-align: center;
	    color: #fff;
	    line-height: 110rpx;
	    font-size: 32rpx;
	}
	
	.u-frame-close {
	    width: 42rpx;
	    height: 42rpx;
	    background-size: 100%;
	    position: absolute;
	    top: 50%;
		margin-top: -21rpx;
	    right: 32rpx;
	}
	.u-frame-cont{
		text-align: center;
		font-size: 36rpx;
		padding-bottom: 35rpx;
		line-height: 60rpx;
		width: 500rpx;
		margin: 0 auto;
	}
	.u-frame-cont view{
		display: flex;
		width: 80%;
		margin: 0 auto;
		justify-content: flex-start;
	}
	.m-frame-footer {
	    height: 100rpx;
	    width: 100%;
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	
	.m-frame-footer view {
		flex: 1;
	    line-height: 100rpx;
	    text-align: center;
	    font-size: 32rpx;
	}
	
	.u-reset {
	    color: #ff0000;
	    background: #fff;
	}
	
	.u-confirm {
	    background: #d71311;
	    color: #fff;
	    border-bottom-right-radius: 16rpx;
	}
</style>
